<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-table
        stripe
        border
        :cell-style="{textAlign: 'center'}"
        :header-cell-style="{textAlign: 'center'}"
        :data="tableData"
        style="width: 75%">
      <el-table-column  prop="stu_id"  label="学生id"></el-table-column>
      <el-table-column  prop="stu_name"  label="学生姓名"></el-table-column>
      <el-table-column  prop="paper_name"  label="学位论文题目"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="downloadSource(scope.row)">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
// import AppointmentDialog from "@/components/appointmentDialog";
import servicesApi from '@/services/servicesApi';
export default {
  name: 'appointmentList',
//   components:{
//     AppointmentDialog
//   },
  data() {
    return {
      tableData: [ // 表格数据
      {
        // eslint-disable-next-line camelcase
        stu_id: 2020110216,
        // eslint-disable-next-line camelcase
        stu_name: '胡彪',
        // eslint-disable-next-line camelcase
        paper_name: '毕设管理',
        orderACK: false
      }
      ],
      total: 1
    }
  },
  mounted() {
    this.getdownloadpaperApi()//生命周期
  },

// https://www.bilibili.com/video/BV1ju411Q7mj/?spm_id_from=333.337.search-card.all.click&vd_source=5420f3ac5dcea48d7731c857a4343144
  methods: {
    // 请求列表
    getdownloadpaperApi() {
      servicesApi.getdownloadpaperApi().then(res => {
        // console.log(res.data.data)
        this.tableData = res.data.data//获取数据赋值给数组
        this.total = this.tableData.length//数据长度赋值给数组
      })
    },
      downloadSource(item) {
        let token = localStorage.getItem('token');
        if (token) {
          //课程id
          let courseId = item.courseId;
          //资料id
          let attachmentId = item.id;
          //下载
          request({
            url: '/student/wenxian/downFile',
            method: 'GET',
            params: {courseId, attachmentId},
            responseType: 'blob'
          }).then(res => {
            let fileName = item.attachmentName;
            let fileUrl = item.attachmentUrl;
            let extName = fileUrl.substring(fileUrl.lastIndexOf('.'));

            const link = document.createElement('a');
            link.download = fileName + extName;
            link.herf = URL.createObjectURL(res);
            link.target = 'blank';
            link.style.display = 'none';
            download.body.appendChild(link);
            link.click();

            URL.removeObjectURL(link, herf);
            document.body.removeChild(link);
          })
        }
      }


// https://blog.csdn.net/RequesToGod/article/details/111629296?ops_request_misc=&request_id=&biz_id=102&utm_term=vue%E8%A1%A8%E5%8D%95%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-1-111629296.142^v59^pc_rank_34_1,201^v3^add_ask&spm=1018.2226.3001.4187
//  downLoadFile(fileName){   
//         axios({
//           url:'http://localhost:3030/api/download',
//           method:'get',
//           responseType: 'arraybuffer',  	
//           /*
// 	当将responseType设置为一个指定类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容呢?恭喜你，你会发现服务器返回的数据变成了null，即使服务器返回了数据。
// 	通俗来说，如果你resoinseType设置的是JSON，就会将后端穿过来的数据尝试转换为Json格式，如果转换不了那就会强制转换成null。
// 	我们下载文件一般设置responseType为blob或者arraybuffer都可以，为什么呢，一般下载文件掉后台接口，一般后台返回都是二进制数据。而blob和arraybuffer都是二进制数据的一种，所以当我们设置responseType为blob时，请求到后台返回的二进制数据后就会将该二进制数据转换为blob类型的二进制数据。设置responseType为arraybuffer是一样的道理
// 	当然如果你不安规矩来，瞎几把乱搞，比如后台穿的是一个对象类型的数据例如{name:'xq'}，我们知道对象是可以转成Json的，但是如果你response不是设置的Json，而是设置的arraybuffer或者blob，那么请求到数据时就会尝试将对象类型的数据转换为arraybuffer或者blob类型的二进制数据。这很明显是转不了的，这不就乱套了嘛，所以这个时候就会直接返回一个null空数据。
// 	*/
//           params:{
//             fileName  
//           }    
//         }).then(
//           (res) => {
//             // console.log(res)
//             //使用Blob对象将后端返回的Arraybuffer格式得数据转成blob类型的数据 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
//             var b = new Blob([res.data], { type: 'application/vnd.ms-excel' });
//             // 使用URL对象将blob类型的数据生成一个在线下载的链接
//             var url = URL.createObjectURL(b);
//             // 然后我们使用a标签进行下载
//            var link = document.createElement('a');
         
//             // 设置导出的文件名
//            link.download = file.name;
//            link.href = url;
//            // 点击获取文件
//              link.click();
//           },
//           (err) => {
//             // console.log(err);
//           }
//         );
//       }


// https://blog.csdn.net/qq_43705697/article/details/123960369?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522166644848616782427412152%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=166644848616782427412152&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v1~rank_v31_ecpm-11-123960369-null-null.142^v59^pc_rank_34_1,201^v3^add_ask&utm_term=vue%E8%A1%A8%E5%8D%95%E6%96%87%E4%BB%B6%E4%B8%8B%E8%BD%BD&spm=1018.2226.3001.4187
// downloadAttach(url) {
//     let _this = this;
//     // 发送get请求
//     this.$axios
//     .get('/api/file/downloadFile', {
//         params: {
//             // 向后端传入下载路径
//             file: url,
//         }
//     })
//     .then(res => {
//         // alert("请求成功");
//         // console.log(res.data); // 获取服务端提供的数据
//         let blob = new Blob([res.data])
//         let contentDisposition = res.headers['content-disposition']
//         let pattern = new RegExp('filename=([^;]+\\.[^\\.;]+);*')
//         let result = pattern.exec(contentDisposition)
//         // 使用decodeURI对名字进行解码
//         let fileName = decodeURI(result[1])
//         let downloadElement = document.createElement('a')
//         // 创建下载的链接
//         let href = window.URL.createObjectURL(blob)
//         downloadElement.style.display = 'none'
//         downloadElement.href = href
//         // 下载后文件名
//         downloadElement.download = fileName
//         document.body.appendChild(downloadElement)
//         // 点击下载
//         downloadElement.click()
//         // 下载完成移除元素
//         document.body.removeChild(downloadElement)
//         // 释放掉blob对象
//         window.URL.revokeObjectURL(href)
//     })
//     .catch(() => {
//         alert("请求出错");
//     })
//     // alert(url);
// }

  }
}
</script>

<style scoped>
.content {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 20vw;
  left:16vw;
  z-index: 1;
}
</style>